<template>
    <div>
        <Spin fix v-if="loading">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>图片上传中</div>
        </Spin>
        <Upload
            ref="upload"
            :show-upload-list = "false"
            :on-success = "handleSuccess"
            :headers = "headers"
            action = "https://upload.qiniup.com"
            :multiple = "multiple"
            :accept="accept"
            style = "display: inline-block; width: 58px;"
            :data = "{
                token: qiniuToken
            }"
            :on-error = "handleError"
            :before-upload = "handleBefore"
        >
            <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="camera" size="20"></Icon>
            </div>
        </Upload>
        <template v-if="multiple">
            <div v-if="defalutImg.constructor === Array">
                <div v-if="defalutImg.length && defalutImg.length > 0">
                    <div class="defalut-img-list" v-for="(url,index) in defalutImg" :key="index">
                        <div style="width:60px; height:60px; overflow:hidden">
                            <img :src="url" width="60">
                        </div>
                        <div style="text-align:center">
                            <Button type="text" size="small" style="margin:0 auto" @click="handleDelImg(index)">删除</Button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="defalut-img-list" v-if="defalutImg" style="display:block">
                <img :src="defalutImg" width="60">
            </div>
        </template>
    </div>
</template>

<script>
import axios from "axios";
import { mapActions, mapGetters } from "vuex";
export default {
    data() {
        return {
            loading: false,
            headers: {
                Authorization: localStorage.getItem("token")
            }
        };
    },
    props: ["defalutImg", "multiple", "uploadId", "accept"],
    computed: {
        ...mapGetters(["qiniuToken"])
    },
    methods: {
        handleBefore(file) {
            if (file) {
                this.loading = true;
            }
        },
        handleSuccess(res) {
            console.log(res);
            var key = res.key;
            axios.get("/api/QiNiu/GetPublicUrl?key=" + key).then(res => {
                // console.log(res);
                this.loading = false;
                var { data } = res.data;
                this.$emit("handleSuccess", data);
            });
        },
        handleClearFiles() {
            this.$refs.upload.clearFiles();
        },
        handleDelImg(i) {
            this.$emit("handleDelImg", i);
        },
        handleError(res) {
            console.log(res);
            this.loading = false;
            this.$Message.error('上传图片失败')
        }
    }
};
</script>

<style scoped>
.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}
.defalut-img-list {
    display: inline-block;
    border: 1px solid #dedede;
    border-radius: 3px;
    width: 60px;
    height: 60px;
    margin-top: 10px;
    margin-right: 10px;
    vertical-align: middle;
}
.defalut-img-list img {
    display: inline-block;
    width: 100%;
}
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
}
.demo-upload-list img {
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}
.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.ivu-upload {
    text-align: center;
    border: 1px dashed #dddddd;
    border-radius: 3px;
    cursor: pointer;
}
</style>
